import React from 'react';

interface GlassTextareaProps {
  /** 输入值 */
  value: string;
  /** 值变化回调 */
  onChange: (value: string) => void;
  /** 占位符 */
  placeholder?: string;
  /** 自定义类名 */
  className?: string;
  /** 是否禁用 */
  disabled?: boolean;
  /** 标签 */
  label?: string;
  /** 错误信息 */
  error?: string;
  /** 行数 */
  rows?: number;
  /** 最大字符数 */
  maxLength?: number;
}

/**
 * 毛玻璃多行文本输入组件
 * 用于聊天记录等长文本输入
 */
export const GlassTextarea: React.FC<GlassTextareaProps> = ({
  value,
  onChange,
  placeholder = '',
  className = '',
  disabled = false,
  label,
  error,
  rows = 4,
  maxLength,
}) => {
  return (
    <div className={`w-full ${className}`}>
      {label && (
        <label className="block text-emerald-700 text-sm font-medium mb-2">
          {label}
        </label>
      )}
      <textarea
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        disabled={disabled}
        rows={rows}
        maxLength={maxLength}
        className={`
          w-full px-4 py-3
          bg-white/80 backdrop-blur-md
          border rounded-lg
          text-gray-700 placeholder-gray-400
          outline-none resize-none
          transition-all duration-300
          ${error 
            ? 'border-red-400 focus:border-red-500' 
            : 'border-emerald-200 focus:border-emerald-400 focus:bg-white'
          }
          ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
        `}
      />
      <div className="flex justify-between mt-1">
        {error && (
          <p className="text-sm text-red-500">{error}</p>
        )}
        {maxLength && (
          <p className={`text-sm ml-auto ${value.length > maxLength * 0.9 ? 'text-orange-500' : 'text-gray-400'}`}>
            {value.length}/{maxLength}
          </p>
        )}
      </div>
    </div>
  );
};

export default GlassTextarea;
